<template>
    <div  class='box'>
        <div class="tableTr tableBody flex">
            <!-- 柱状图开始 -->
            <div class="echarts_box w1021">
                <div class="w1021" id="myecharts"></div>
            </div>
            <!-- 柱状图结束 -->
        </div>
        <div class="info tableTr tableBody flex">
            <span>注：点击下方表格可切换查看各指标的历史趋势</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "echartsList",
    props: {
        x_data: {
            type: Array,
            default: [],
        },
        seriesList: {
            type: Array,
            default: [],
        },
        name: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            myChart: null,
        };
    },

    watch: {
        seriesList: {
            handler(val, oldName) {
                console.log("watch================");
                if (!this.myChart) {
                    this.$nextTick(() => {
                        this.myChart = this.$echarts.init(
                            document.getElementById("myecharts")
                        );
                        this.myEcharts();
                    });
                } else {
                    this.$nextTick(() => {
                        this.myEcharts();
                    });
                }
            },
            immediate: true,
            deep: true,
        },
    },
    // mounted() {
    //     this.myChart = this.$echarts.init(document.getElementById("myecharts"));
    // },
    methods: {
        myEcharts() {
            //配置图表
            var option = {
                title: {
                    text: "",
                },
               tooltip: {
                    // formatter: "{a} <br/>  {b}  {c}%",
                    backgroundColor: "rgba(0,0,0,1)", // 提示框背景颜色
                    textStyle: {
                        fontSize: "14px",
                        color: "#ffffff", // 设置文本颜色 默认#FFF
                        lineHeight: "16px",
                    },
                    formatter: (params) => {
                        var res = `
                            <div >
                             <div >
                               <span style="color:#ffff;font-size:14px">
                                    ${params.name}
                               </span>
                               </div>
                                <div  style="color: #448AFF;font-size:14px;margin-top:10px;">
                               <span >
                                    ${params.seriesName}
                               </span>
                               <span style="padding-left:20px;">
                                    ${params.value}
                               </span>
                               </div>
                            <div>
                         `;
                        return res;
                    },
                },
                legend: {
                    textStyle: {
                        color: "#E6E6E6",
                        fontSize: 16,
                    },
                },
                xAxis: {
                    data: this.x_data,
                    axisLabel: {
                        show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
                        interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                        textStyle: {
                            color: "#999999",
                            fontSize: 14,
                        },
                        
                    },

                    axisLine: {
                        show: true, // X轴线设置
                        lineStyle: {
                            color: "#000",
                            width: 1,
                        },
                    },
                },
                yAxis: {
                    // min: ,
                    // max: 10000,
                    axisLine: {
                        show: true, // Y轴线设置
                        lineStyle: {
                            color: "#000",
                            width: 1,
                        },
                    },
                    axisLabel: {
                        //字体颜色
                        show: true, //这里的show用于设置是否显示x轴下的字体 默认为true
                        interval: 0, //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
                        textStyle: {
                            //textStyle里面写x轴下的字体的样式
                            color: "#999999",
                            fontSize: 14,
                        },
                    },

                    splitLine: {
                        //x轴虚线颜色
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: "#000",
                            width: 1,
                        },
                    },
                },

                series: [
                    {
                        data: this.seriesList,
                        type: "bar",
                        name: this.name,
                        textStyle: {
                            color: "#ffffff",
                            fontSize: 14,
                        },
                    },
                ],
            };
            this.myChart.setOption(option);
        },
    },
};
</script>

<style lang="scss" scoped>
.box{
    padding-top:20px;
    background: #1A1A1F;
    // border: 1px solid #000000;
}
#myecharts {
    height: 257px;
}
.info {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    justify-content: center;
    padding-bottom:20px;
    margin-top:-20px;
}
.active_Row {
    background: #2d3245 !important;
}
</style>